import React, { Component } from 'react'
import { View} from '@tarojs/components'
import Taro,{Current} from '@tarojs/taro'
import { AtListItem,AtModal} from "taro-ui"
import {api_get_userThings,api_place_order} from '../../../utils/api'
import "./placeOrder.scss"

export default class placeOrder extends Component {

  constructor(){
    super(...arguments)
    this.state = {
      loading:false,
      getting:false
    }
  }

  componentWillMount(){
    this.setState({
      time_data:{
        date:Current.router.params.date,
        week:Current.router.params.week,
        hour:Current.router.params.hour,
        fee:Current.router.params.fee,
        doctor_name:Current.router.params.doctor_name,
        doctor_id:Current.router.params.doctor_id
      },
      getting:true
    })
     // 加载数据
     Taro.showLoading({
      title: '加载中',
    })
  }

  timeFormat = (time) =>{
    switch (time) {
      case '08': return '08:00-09:00'
      case '09': return '09:00-10:00'  
      case '10': return '10:00-11:00'
      case '14': return '14:00-15:00'
      case '15': return '15:00-16:00'
      case '16': return '16:00-17:00'
      default:return time
    }
  }

  goNextPage =() =>{
    if(this.state.order_id == -1){
      Taro.showModal({
        title: '错误提示',
        confirmText:'确认',
        showCancel:false,
        content: '同一时间段只能预约一位医生！',
        success: function (res) { }
      })
    }else{
      const page = '/pages/pagesA/pay/pay?order_id='+this.state.order_id
          +'&doctor_name='+this.state.time_data.doctor_name+'&fee='+this.state.time_data.fee+'&department='+this.state.department
      Taro.navigateTo({url: page})
    }
  }
  
  handleClick =() => {   
    const params = {
      url: api_place_order,
      data: {
        phone:Taro.getStorageSync('userInfo').userPhone,
        doctor_id:this.state.time_data.doctor_id,
        date:this.state.time_data.date,
        hour:this.state.time_data.hour,
        fee:this.state.time_data.fee
      },
      method: 'POST',
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success: (res) => {
        this.setState({
          order_id:res.data.order_id,
          hospital_name:res.data.hospital_name,
          department:res.data.department
        })  
      },
      fail: (res) => {console.log(res.data)}
    }
    // console.log(this.state.user_data.patient_name);
    
    if(this.state.user_data.patient_name!='' && this.state.user_data.id_number!='' && this.state.user_data.id_number!=null  && this.state.user_data.patient_name!=null){
      Taro.request(params).then(this.goNextPage)
    }else{
      console.log(1);
      
      Taro.showModal({
        title: '错误提示',
        confirmText:'确认',
        showCancel:false,
        content: '请完善个人信息！',
        success: function (res) {
          if (res.confirm) {
            Taro.redirectTo({
              url:'/pages/pagesB/strictInfo/strictInfo'
            })
          }
        }
      })
    }
  }

  myRequest =  () => {
    const params = {
      url: api_get_userThings,
      data: {
        phone:Taro.getStorageSync('userInfo').userPhone
      },
      method: 'POST',
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success: (res) => {
        console.log(this.res);
        
        this.setState({
          user_data:res.data,
          loading:true
        })  
      },
      fail: (res) => {console.log(res.data)}
    }
    Taro.request(params)
  }

  render () {
    if(this.state.getting && !this.state.loading){
      this.myRequest()
    }

    if(this.state.loading ){
      setTimeout(function () {Taro.hideLoading()}, 100)
    }
    return (
      this.state.getting&&this.state.loading?
      <View className='checkInfo'>
        <View className='at-row'>
          <AtListItem note={'预约信息('+this.state.time_data.date +' '+this.state.time_data.week+')'}  />
        </View>
        <View className='at-row'>
            <AtListItem  title='预约医生' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'calendar', }}></AtListItem>
            <AtListItem className='at-col ' note={this.state.time_data.doctor_name}></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='号段时间' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'clock', }}></AtListItem>
            <AtListItem className='at-col ' note={this.timeFormat(this.state.time_data.hour)}></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='就诊人' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'user', }}></AtListItem>
            <AtListItem className='at-col ' note={this.state.user_data.patient_name}></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='证件类型' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'money', }}></AtListItem>
            <AtListItem className='at-col ' note='居民身份证'></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='证件号码' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'credit-card', }}></AtListItem>
            <AtListItem className='at-col ' note={this.state.user_data.id_number}></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='性别' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'text-strikethrough', }}></AtListItem>
            <AtListItem className='at-col ' note={this.state.user_data.sex}></AtListItem>
        </View>
        <View className='at-row'>
            <AtListItem  title='疾病信息' className='at-col at-col-6' 
                        iconInfo={{ size: 20, value: 'tag', }}></AtListItem>
            <AtListItem className='at-col ' note='未确诊'></AtListItem>
        </View>
        <button onClick={this.handleClick} type='primary' className='button'>立即预约</button>
      </View>
      :<View></View>
    )
  }
}
